<template>
  <view class="content">
    <view class="search">
      <input type="text" v-model="data.cha" placeholder="请输入商品名称" />
      <button @click="query" class="button">搜索</button>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in data.goodlist" :key="index">
        <image :src="item.coverUrl" mode="aspectFit"></image>
        <view class="text">
          <view class="name">{{ item.title }}</view>
          <view>
            售价：
            <text>￥{{ item.price }}</text>
          </view>
          <view>
            成本：
            <text>￥{{ item.costPrice }}</text>
          </view>
          <view>
            售额：
            <text>{{ item.salesVolume }}个</text>
          </view>
        </view>
        <view class="run">
          <view class="sta" @click="putsta(item)">{{ goodsta(item.status) }}</view>
          <view class="bian" @click="edit(item.id)">修改</view>
          <view class="del" @click="delgood(item.id)">删除</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="add">添加商品</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { goodsta } from '@/utils/utils';
import { err, toast, to } from '@/utils/uniapi';
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { api } from '@/api/mop_api';
const data = reactive({
  goodlist: [],
  page: 1,
  size: 10,
  pageTotal: 0,
  cha: ''
});
onLoad(() => {
  data.goodlist = [];
  goodlist();
});
async function goodlist() {
  try {
    const { page, size, goodlist } = data;
    const res = await api.goodList({
      page,
      size,
      data: undefined
    });
    const { respCode, source, pageTotal, msg } = res;
    if (respCode === 200) {
      let newGoodlist = JSON.parse(source);
      newGoodlist = arrjson(newGoodlist);
      data.pageTotal = pageTotal;
      data.goodlist = goodlist.length === 0 ? newGoodlist : goodlist.concat(newGoodlist);
      console.log(data.goodlist)
    } else {
      toast(msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function arrjson(arr: any) {
  try {
    arr.forEach((e: any) => {
      if (e.coverUrl) {
        e.coverUrl = JSON.parse(e.coverUrl);
      }
    });
    return arr;
  } catch (error) {
    err(error);
    throw error;
  }
}
function delgood(e: any) {
  try {
    wx.showModal({
      title: '提示',
      content: '你确定删除该商品吗？',
      complete: async (res: any) => {
        if (res.confirm) {
          const res = await api.goodDel({ id: e });
          if (res.respCode === 200) {
            (data.goodlist = []), (data.page = 1);
            goodlist();
            toast('删除成功');
          } else {
            toast(res.msg);
          }
        }
      }
    });
  } catch (error) {
    err(error);
    throw error;
  }
}
function edit(e: any) {
  to('/dj/addgood/addgood?id=' + e);
}
async function putsta(e: any) {
  try {
    const { id, status } = e;
    const newStatus = status === 'DISABLED' ? 'NORMAL' : 'DISABLED';
    const res = await api.goodsta({ id, status: newStatus });
    if (res.respCode === 200) {
      data.page = 1;
      data.goodlist = [];
      goodlist();
      toast('修改成功');
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
async function query() {
  try {
    const title = data.cha;
    const res = await api.goodList({ page: 1, size: 10, data: { title } });
    if (res.respCode === 200) {
      let goodlist = JSON.parse(res.source);
      goodlist = arrjson(goodlist);
      data.goodlist = goodlist;
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function add() {
  to('/dj/addgood/addgood');
}
onReachBottom(() => {
  const { pageTotal, page } = data;
  if (data.goodlist.length < pageTotal) {
    data.page = page + 1;
    goodlist();
  } else {
    toast('已加载全部数据');
  }
});
</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  margin-top: 20rpx;
}
input {
  width: 600rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 27rpx 27rpx 27rpx 27rpx;
  border: 2rpx solid #d8d8d8;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: block;
  float: left;
  margin-left: 10rpx;
}
.button {
  padding: 0;
  margin: 0;
  width: 130rpx;
  height: 80rpx;
  background: #e30514;
  font-size: 32rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 600;
  color: #ffffff;
  line-height: 80rpx;
  display: block;
  float: right;
  margin-right: 10rpx;
}
.list {
  width: 100%;
  height: 100%;
  padding-bottom: 90rpx;
}
.item {
  width: 688rpx;
  min-height: 200rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.06), 0rpx 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1);
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  margin: 30rpx auto;
  padding: 16rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.item image {
  width: 118rpx;
  height: 118rpx;
  display: block;
  float: left;
  margin-left: 32rpx;
  margin-top: 8rpx;
}
.text {
  margin-left: 30rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 350;
  color: rgba(0, 0, 0, 0.6);
}
.name {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3c3c3c;
}
.sta {
  width: 90rpx;
  height: 40rpx;
  background: #e30514;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
  margin-right: 10rpx;
}
.bian {
  width: 64rpx;
  height: 40rpx;
  background: #e30514;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 40rpx;
  margin: 10rpx 0;
  margin-right: 10rpx;
}
.del {
  width: 64rpx;
  height: 40rpx;
  background: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #e30514;
  text-align: center;
  margin-right: 10rpx;
  border: 1rpx solid #e30514;
  box-sizing: border-box;
  line-height: 40rpx;
}
.run {
  width: 100rpx;
  height: 160rpx;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.btn {
  width: 652rpx;
  height: 80rpx;
  background: #e30514;
  border-radius: 56rpx 56rpx 56rpx 56rpx;
  margin: 0 auto;
  font-size: 32rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
}
</style>
